<template>
  <div class="StoreSetting" style="min-width: 1900px">
    <div class="ele-title">
      <h3>门店商品详情</h3>
    </div>
    <div class="ele-store">
      <span class="ele-span-title">门店：</span>

      <div class="card-list">
        <el-card>
          <div slot="header" class="ele-card-header" />
          <div class="ele-content">
            <div class="left">
              <el-image
                :src=" require('@/assets/images/shop.jpg')
                "
                alt=""
              />
            </div>
            <div class="right">
              <p>{{ shopName }}</p>
              <p>{{ shopAddress }}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="ele-store">
      <span class="ele-span-title">商品：</span>
      <div class="card-list">
        <el-card>
          <div class="ele-div--1">
            <div class="left">
              <el-image
                :src=" commodityPic"
                style="width: 100px;height: 100px;"
                alt=""
              />
            </div>
            <div class="right">
              <p>{{ commodityName }}</p>
              <p class="ele-type">
                类型:<span v-if="type === 'lease'">租赁</span><span v-if="type === 'sale'">售卖</span>
              </p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <h4>价格库存</h4>
    <div class="formModel">
      <el-form :model="BindForm">
        <el-form-item label="只支持医院" prop="onlyToHospital" label-width="100px">
          <el-row :gutter="24">
            <el-col :span="20" style="padding-left: 0">
              <el-radio-group v-model="BindForm.onlyToHospital" disabled>
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="发货仓库:" prop="stock">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-checkbox
                v-model="BindForm.deliverStore"
                :disabled="true"
              >门店仓库&nbsp;&nbsp;&nbsp;&nbsp;<el-input-number
                v-model="BindForm.goodsStock"
                :controls="false"
                :disabled="true"
                placeholder="输入库存数量"
              /></el-checkbox>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col
              :span="5"
              class="text"
            >无锁止，从门店仓库获取商品库存</el-col>
            <el-col
              :span="6"
              :offset="3"
            >如果多个发货仓库都有库存时，按以下顺序消耗库存，链条锁-医柜-门店仓-云仓</el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-checkbox
                v-model="BindForm.chainLock"
                :disabled="true"
              >链条锁&nbsp;&nbsp;&nbsp;&nbsp;库存：{{ chainStock }}
              </el-checkbox>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col
              :span="12"
              class="text"
            >有锁止，从锁止设备上获取商品库存。</el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-checkbox
                v-model="BindForm.cabinetLock"
                :disabled="true"
              >医柜&nbsp;&nbsp;&nbsp;&nbsp;库存：{{ cabinetStock }}
              </el-checkbox>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="5" class="text">从医柜获取库存。</el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="2">
              <el-checkbox
                v-model="BindForm.cloudLock"
                :disabled="true"
              >云仓&nbsp;&nbsp;&nbsp;&nbsp;库存：{{ cloudStock }}
              </el-checkbox>
            </el-col>
          </el-row>
          <el-row v-if="BindForm.cloudLock" :gutter="24" type="flex" justify="start">
            <div v-for="(item,index) in cloudStoreList" :key="index" style="margin-right: 10px;">
              <el-card style="position: relative;width: 150px;border-radius: 10px;background-color: #F2F1F1">
                <span>{{ item.name }}</span>
                <el-button class="el-icon-close" circle type="danger" style="position: absolute;top: 0;right: 0;font-size: 14px;padding: 3px;" @click="delCloudStore(index)" />
              </el-card>
            </div>
            <el-button type="text" style="margin-left: 10px;" @click="addCloudStore">添加云仓</el-button>
          </el-row>
        </el-form-item>
        <el-form-item v-if="type==='sale'" label="运费:">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-checkbox v-model="BindForm.freeType" disabled>免运费服务</el-checkbox>
            </el-col>
          </el-row>
          <el-row v-show="BindForm.freeType" :gutter="24">
            <el-col :span="7">
              <el-radio-group v-model="BindForm.freeShip" type="flex">

                <el-radio label="1" disabled>免运费</el-radio>

                <el-radio label="2" disabled>消费满</el-radio>

                <el-input-number v-model="BindForm.freeCount" disabled placeholder="请输入金额" :controls="false" style="width:200px" :min="0" :max="1000000" :precision="2" />

              </el-radio-group>
            </el-col>
            <el-col :span="5">
              <span class="margin-left text">元免运费</span>
            </el-col>
            <el-col
              :span="6"
              class="text"
            >根据当前订单金额计算免运费条件的消费金额</el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-else-if="type==='lease'" label="运费:">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-checkbox v-model="BindForm.freeType" disabled>免运费服务</el-checkbox>
            </el-col>
          </el-row>
          <el-row v-show="BindForm.freeType" :gutter="24">
            <el-col :span="12">
              <el-col :span="15">
                <el-radio-group v-model="BindForm.freeShip">
                  <el-radio label="1" disabled>免送货费 </el-radio>
                  <el-radio label="2" disabled>消费满</el-radio><el-input-number v-model="BindForm.freeCount" disabled :controls="false" :min="0" :max="1000000" :precision="2" placeholder="请输入金额" style="width:200px" />
                </el-radio-group>
              </el-col>
              <el-col :span="9">
                <span class="margin-left text">元免送货费</span>
              </el-col>
              <el-col :span="15">
                <el-radio-group v-model="BindForm.freePick">
                  <el-radio label="1" disabled>免取货费 </el-radio>
                  <el-radio label="2" disabled>消费满</el-radio><el-input-number v-model="BindForm.freePickCount" disabled :controls="false" :min="0" :max="1000000" :precision="2" placeholder="请输入金额" style="width:200px" />
                </el-radio-group>
              </el-col>
              <el-col :span="9">
                <span class="margin-left text">元免取货费</span>
              </el-col>
            </el-col>
            <el-col
              :span="6"
              class="text"
            >根据当前订单金额计算免运费条件的消费金额</el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="type === 'sale'" label="零售价格:">
          <el-row :gutter="24">
            <el-col :span="12">
              <div class="dispaly-flex">
                <el-input-number
                  v-if="type === 'sale'"
                  v-model="BindForm.retailPrice"
                  disabled
                  :controls="false"
                  placeholder="售卖商品零售价"
                />
                <el-input-number
                  v-if="type === 'lease'"
                  v-model="BindForm.deposit"
                  disabled
                  :controls="false"
                  placeholder="租赁抵扣金"
                /><span class="margin-left">元</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="5" class="text">用户实际购买价格</el-col>
          </el-row>
        </el-form-item>
        <el-form-item
          v-else-if="type === 'lease'"
          label="收费方式:"
          prop="chargeId"
        >
          <el-row :gutter="24">
            <el-col :span="4">
              <el-select
                v-model="BindForm.chargeId"
                disabled
                @focus="showDialogCharge"
              >
                <el-option
                  v-for="item in chargeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="运维费用:" prop="operateId">
          <el-row :gutter="24">
            <el-col :span="4">
              <el-select
                v-model="BindForm.operateId"
                disabled
                @focus="showDialogOperate"
              >
                <el-option
                  v-for="item in YWFOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item v-if="type=='lease'" label="是否回收" prop="isRecovery">
          <el-row :gutter="24">
            <el-col :span="23">
              <el-radio-group v-model="BindForm.isRecovery">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-col>
            <el-col v-if="BindForm.isRecovery=='1'" :span="23" style="margin-bottom: 10px;">
              <el-form-item label="回收价格" prop="recoveryPrice">
                <el-input v-model="BindForm.recoveryPrice" style="width: 200px" />
              </el-form-item>

            </el-col>
            <el-col v-if="BindForm.isRecovery==1" :span="23" style="display: flex;justify-content: start;">
              <div v-for="(item,index) in collectionList" :key="index" style="margin-right: 10px;">
                <el-card style="position: relative;width: 150px;border-radius: 10px;background-color: #F2F1F1">
                  <span>{{ item.name }}</span>
                  <el-button class="el-icon-close" circle type="danger" style="position: absolute;top: 0;right: 0;font-size: 14px;padding: 3px;" @click="delCollection(index)" />
                </el-card>
              </div>
              <el-button type="text" style="margin-left: 10px;" @click="addCollection">添加回收点</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="type=='lease'" label="免押状态" prop="noDepositStat">
          <el-row :gutter="24">
            <el-col :span="20">
              <el-radio-group v-model="BindForm.noDepositStat" disabled>
                <el-radio label="0">不支持信用免押</el-radio>
                <el-radio label="1">仅支持微信信用免押</el-radio>
                <el-radio label="2">仅支持支付宝信用免押</el-radio>
                <el-radio label="3">同时支持微信信用免押和支付宝信用免押</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="常规规格:" prop="regularSpec">
          <el-col :span="20">
            <div class="Specifications">
              <div class="cations-tag">
                <el-row v-for="(item, index) in list" :key="index">
                  <SpecItem
                    ref="SpecItem"
                    :index="index"
                    :type="3"
                    :table-head="item"
                  />
                </el-row>
              </div>
            </div>
            <table v-show="list && list.length > 0" class="ele-spec-table">
              <thead>
                <tr v-if="theadList && theadList.length > 0">
                  <td v-for="(item, index) in theadList" :key="index">
                    {{ item }}
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tbodyList" :key="index">
                  <td
                    v-for="(i, j) in item"
                    v-show="i.val !== ''"
                    :key="j"
                    :rowspan="i.rowspan"
                  >
                    <span
                      v-show="
                        i.val !== 'salePrice' &&
                          i.val !== 'stock' &&
                          i.val !== 'deposit'
                      "
                    >{{ i.val }}</span>
                    <GoodsDepositValue
                      v-if="i.val === 'deposit'"
                      ref="GoodsDepositValue"
                      :disabled="true"
                      :index="j"
                      :commodity-id="regularProductId[index]"
                      :table-price="regularDepositValue[index]"
                    />
                    <goods-sale-price-value
                      v-if="i.val === 'salePrice'"
                      ref="GoodsSalePriceValue"
                      :disabled="true"
                      :change-disabled="changeDisable"
                      :index="j"
                      :commodity-id="regularProductId[index]"
                      :table-price="regularSaleValue[index]"
                    />
                    <goods-stock-value
                      v-if="i.val === 'stock'"
                      ref="GoodsStockValue"
                      :disabled="true"
                      :change-stock-disabled="changeStockDisable"
                      :index="j"
                      :commodity-id="regularProductId[index]"
                      :table-price="regularStockValue[index]"
                    />
                  </td>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-form-item>

        <el-form-item
          v-if="extraList && extraList.length > 0"
          label="附加规格:"
          prop="extraRegularSpec"
        >
          <el-col :span="20">
            <div class="Specifications">
              <div class="cations-tag">
                <!-- 附加规格栏目 -->
                <el-row v-for="(item, index) in extraList" :key="index">
                  <ExtraSpecItem
                    ref="ExtraSpecItem"
                    :type="3"
                    :index="index"
                    :table-head="item"
                  />
                </el-row>
                <!-- 附加规格栏目 -->
              </div>
            </div>
            <table class="ele-spec-table">
              <thead>
                <tr>
                  <td>规格名</td>
                  <td>规格值</td>
                  <td>关联商品</td>
                  <!-- <td>零售价格</td>
                  <td>库存</td> -->
                </tr>
              </thead>
              <tbody v-for="(item, index) in extraTable" :key="index">
                <tr v-for="(inf, index1) in item.specValue" :key="index1">
                  <td v-if="index1 === 0" :rowspan="item.specValue.length">
                    {{ item.specName }}
                  </td>
                  <td>{{ inf.value }}</td>
                  <td>
                    <div v-if="inf.goods === 'goods'">
                      <goods-info
                        ref="goods-info"
                        :index="index"
                        :goods-id="inf.commodityid"
                      />
                    </div>
                    <div v-if="inf.goods === 'service'">
                      <service-info
                        ref="serviceInfo"
                        :index="index"
                        :service-id="inf.commodityid"
                      />
                    </div>
                  </td>
                  <!-- <td v-if="inf.salePrice === 'salePrice'">
                    <GoodsExtraSalePriceValue
                      ref="GoodsExtraSalePriceValue"
                      :index="index"
                      :product-id="inf.productId"
                      :table-price="inf.saleValue"
                    />
                  </td>
                  <td v-if="inf.stock === 'stock'">
                    <GoodsExtraStockValue
                      ref="GoodsExtraStockValue"
                      :index="index"
                      :product-id="inf.productId"
                      :table-price="inf.stockValue"
                    />
                  </td> -->
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-form-item>
        <h4>物流设置</h4>
        <el-form-item label="配送费用:" prop="radio1">
          <el-row :gutter="24">
            <el-col :span="2">
              <el-radio v-model="radio1" disabled label="0">统一费用</el-radio>
            </el-col>
          </el-row>
          <el-row v-if="type == 'lease'" :gutter="24">
            <el-col :span="10">
              <el-radio-group v-model="TyIsAfterPay" disabled>
                <el-radio label="0">先付费</el-radio>
                <el-radio label="1">后付费</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row v-if="BindForm.cloudLock" :gutter="24">
            <el-col :span="2" class="left-end">
              <label>云仓物流</label>
            </el-col>
            <el-col :span="22">
              <el-col v-for="(item,index) in cloudStoreList" :key="index" :span="24">
                <CloudStoreExpress ref="cloudStoreExpress" :cloud-store="item" />
              </el-col>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="2" class="left-end">
              <label>同城送取</label>
            </el-col>
            <el-col :span="22">
              <el-col :span="1">配送</el-col>
              <el-col :span="23">
                <el-col :span="24">
                  <el-radio v-model="TySameCityDeliveryExpressType" label="0" disabled>同城物流配送</el-radio>
                </el-col>
                <el-col :span="24">
                  <el-col :span="4">
                    <el-select v-model="TySameCityDeliveryExpressCompany" disabled>
                      <el-option
                        label="顺丰"
                        value="0"
                      >
                        顺丰
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="6">
                    <el-input v-model="TySameCityDeliveryExpressCost" placeholder="输入费用" disabled />
                  </el-col>
                  <el-col :span="12" class="el-col-offset-1">
                    <el-form-item label="送达时间" class="sendTime">
                      <div style="display: flex;">
                        <el-form-item prop="TySameCityDeliverySendFastTime" label-width="0">
                          <el-input-number
                            v-model="TySameCityDeliverySendFastTime"
                            placeholder="输入最快送达时间"
                            disabled
                            :precision="0"
                            :controls="false"
                            :min="0"
                            :max="TySameCityDeliverySendSlowTime"
                          />
                        </el-form-item>
                        <span style="margin-left:20px;margin-right: 20px">至</span>
                        <el-form-item prop="TySameCityByselfSendSlowTime" class="sendTime" label-width="0">
                          <el-input-number
                            v-model="TySameCityDeliverySendSlowTime"
                            placeholder="输入最慢送达时间"
                            disabled
                            :precision="0"
                            :controls="false"
                            :min="TySameCityDeliverySendFastTime"
                            :max="24"
                          />
                        </el-form-item>
                        <span style="margin-left:20px">小时</span>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-radio v-model="TySameCityDeliveryExpressType" label="1" disabled>同城自营骑手配送</el-radio>
                </el-col>
                <el-col :span="24">
                  <el-col :span="6">
                    <el-input v-model="TySameCityDeliveryBySelfCost" placeholder="输入费用" disabled />
                  </el-col>
                  <el-col :span="12" class="el-col-offset-1">
                    <el-form-item label="送达时间" class="sendTime">
                      <div style="display: flex;">
                        <el-form-item prop="TySameCityByselfsendFastTime" label-width="0">
                          <el-input-number
                            v-model="TySameCityByselfsendFastTime"
                            placeholder="输入最快送达时间"
                            disabled
                            :precision="0"
                            :controls="false"
                            :min="0"
                            :max="TySameCityByselfsendSlowTime"
                          />
                        </el-form-item>
                        <span style="margin-left:20px;margin-right: 20px">至</span>
                        <el-form-item prop="TySameCityByselfsendSlowTime" class="sendTime" label-width="0">
                          <el-input-number
                            v-model="TySameCityByselfsendSlowTime"
                            placeholder="输入最慢送达时间"
                            disabled
                            :precision="0"
                            :controls="false"
                            :min="TySameCityByselfsendFastTime"
                            :max="24"
                          />
                        </el-form-item>
                        <span style="margin-left:20px">小时</span>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
              <el-col v-if="type=='sale'||(type=='lease' && BindForm.isRecovery=='0') || (type=='lease' && !BindForm.isRecovery)" :span="1">取回</el-col>
              <el-col v-if="type=='sale'||(type=='lease' && BindForm.isRecovery=='0') || (type=='lease' && !BindForm.isRecovery)" :span="23">
                <el-col :span="24">
                  <el-radio v-model="TySameCityRecoveryExpressType" label="0" disabled>同城物流售后取回</el-radio>
                </el-col>
                <el-col :span="24">
                  <el-col :span="4">
                    <el-select v-model="TySameCityRecoveryExpressCompanyId" disabled>
                      <el-option
                        label="顺丰"
                        value="0"
                      >
                        顺丰
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="6">
                    <el-input v-model="TySameCityRecoveryExpressCost" placeholder="输入费用" disabled />
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-radio v-model="TySameCityRecoveryExpressType" label="1" disabled>同城自营骑手售后取回</el-radio>
                </el-col>
                <el-col :span="24">
                  <el-col :span="6">
                    <el-input v-model="TySameCityRecoveryByselfCost" placeholder="输入费用" disabled />
                  </el-col>
                </el-col>
              </el-col>
            </el-col>

          </el-row>

          <el-row :gutter="24" style="margin-top:20px">
            <el-col :span="2">
              <el-radio v-model="radio1" label="1" disabled>运费模板</el-radio>
            </el-col>
          </el-row>
          <el-row v-if="type == 'lease'" :gutter="24">
            <el-col :span="24">
              <el-radio-group v-model="isModelAfterPay" disabled>
                <el-radio label="0">先付费</el-radio>
                <el-radio label="1">后付费</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>

          <el-row v-if="BindForm.cloudLock" :gutter="24">
            <el-col :span="2" class="left-end">
              <label>云仓物流</label>
            </el-col>
            <el-col :span="22">
              <el-col v-for="(item,index) in cloudStoreList" :key="index" :span="24">
                <CloudStoreExpressModel ref="cloudStoreExpressModel" :cloud-store="item" />
              </el-col>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="2" class="left-end">
              <label>同城送取</label>
            </el-col>
            <el-col :span="22">
              <el-col :span="1" class="left-end">配送</el-col>
              <el-col :span="23">
                <el-col :span="24">
                  <el-radio v-model="modelSameCityDeliveryExpressType" label="0" disabled>同城物流配送</el-radio>
                </el-col>
                <el-col :span="24">
                  <el-col :span="4">
                    <el-select v-model="modelSameCityDeliveryExpressCompany" disabled>
                      <el-option
                        label="顺丰"
                        value="0"
                      >
                        顺丰
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="6">
                    <el-select
                      ref="modelSameCityFreightId"
                      v-model="modelSameCityDeliveryFreightId"
                      disabled
                      placeholder="选择运费模板"
                      style="width:200px"
                      @focus="showDialogYF(1,'modelSameCityDeliveryFreight')"
                    >
                      <el-option
                        v-for="item in YFCityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-radio v-model="modelSameCityDeliveryExpressType" label="1" disabled>同城自营骑手配送</el-radio>
                </el-col>
                <el-col :span="24">
                  <el-col :span="6">
                    <el-select
                      ref="freightCityId"
                      v-model="modelSameCityDeliveryBySelfFreightId"
                      disabled
                      placeholder="选择运费模板"
                      style="width:200px"
                      @focus="showDialogYF(1,'modelSameCityDeliveryBySelfFreight')"
                    >
                      <el-option
                        v-for="item in YFCityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-col>
              </el-col>
              <el-col v-if="type=='sale'||(type=='lease' && BindForm.isRecovery=='0') || (type=='lease' && !BindForm.isRecovery)" :span="1">取回</el-col>
              <el-col v-if="type=='sale'||(type=='lease' && BindForm.isRecovery=='0') || (type=='lease' && !BindForm.isRecovery)" :span="23">
                <el-col :span="24">
                  <el-radio v-model="modelSameCityRecoveryExpressType" label="0" disabled>同城物流售后取回</el-radio>
                </el-col>
                <el-col :span="24">
                  <el-col :span="4">
                    <el-select v-model="modelSameCityRecoveryExpressCompany" disabled>
                      <el-option
                        label="顺丰"
                        value="0"
                      >
                        顺丰
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="6">
                    <el-select
                      ref="freightCityId"
                      v-model="modelSameCityRecoveryExpressFreightId"
                      disabled
                      placeholder="选择运费模板"
                      style="width:200px"
                      @focus="showDialogYF(1,'modelSameCityRecoveryExpressFreight')"
                    >
                      <el-option
                        v-for="item in YFCityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-radio v-model="modelSameCityRecoveryExpressType" label="1" disabled>同城自营骑手售后取回</el-radio>
                </el-col>
                <el-col :span="24">
                  <el-col :span="6">
                    <el-select
                      ref="freightCityId"
                      v-model="modelSameCityRecoveryByselfFreightId"
                      disabled
                      placeholder="选择运费模板"
                      style="width:200px"
                      @focus="showDialogYF(1,'modelSameCityRecoveryByselfFreight')"
                    >
                      <el-option
                        v-for="item in YFCityOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="BindForm.isRecovery==1" label="回收费用" prop="radio2">
          <el-row :gutter="24">
            <el-col :span="2" style="padding-left: 0;">
              <el-radio v-model="radio2" label="0" disabled>统一费用</el-radio>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-col v-for="(item,index) in collectionList" :key="index" :span="24">
                <collectionCost ref="collectionCost" :collection="item" />
              </el-col>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="2" style="padding-left: 12px;">
              <el-radio v-model="radio2" label="1">运费模板</el-radio>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-col v-for="(item,index) in collectionList" :key="index" :span="24">
                <CollectionModel ref="CollectionModel" :collection="item" />
              </el-col>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <!--云仓弹出框-->
    <!--    <add-cloud-store
      ref="AddCloudStore"
      :visible="cloudStockVisible"
      @handelClose="handelClose"
      @handelAllSelect="handelAllSelect"
    />-->
    <!-- 回收点弹框-->
    <!--    <AddCollection
      ref="AddCollection"
      :visible="collectionVisible"
      @handelClose="handelCollectionClose"
      @handelAllSelect="handelAllCollectionSelect"
    />-->
    <!-- 添加运费模板弹框-->
    <!--    <AddExpressModel
      ref="AddExpressModel"
      :visible="expressModelVisible"
      @getYFList="getYFOptions"
      @getYFCityList="getYFCityOptions"
      @getSelectYFModelByChar="getSelectYFModelByChar"
      @handelClose="handelExpressClose"
    />-->
  </div>
</template>

<script>
import { getShopID } from '@/utils/auth'
import { YWFTemplateList } from '@/views/shop/api/YWFTemplate'
import { freightTemplateList } from '@/views/shop/api/FreightTemplate'
import {
  dialogAddress,
  getDialogCityListByid,
  getDialogVillage,
  getDialogVillageListByid
} from '@/utils/address'
import {
  getCloudStockById,
  getGoodsStockById,
  storeCommodityDetail,
  linkShopList
} from '@/api/commodity'
import SpecItem from '@/components/SpecItem'
import GoodsDepositValue from '@/components/GoodsDepositValue'
import GoodsSalePriceValue from '@/components/GoodsSalePriceValue'
import GoodsStockValue from '@/components/GoodsStockValue'
import ExtraSpecItem from '@/views/Commodity/component/ExtraSpecItem'
import GoodsInfo from '@/components/GoodsInfo'
import ServiceInfo from '@/components/ServiceInfo'
/* import AddCollection from '@/components/AddCollection'*/
/* import AddCloudStore from '@/components/AddCloudStore'*/
/* import AddExpressModel from '@/components/AddExpressModel'*/
import CloudStoreExpress from '@/components/CloudStoreExpress'
import collectionCost from '@/components/CollectionCost'
import CollectionModel from '@/components/CollectionModel'
import CloudStoreExpressModel from '@/components/CloudStoreExpressModel'
// import GoodsExtraSalePriceValue from '@/components/GoodsExtraSalePriceValue'
// import GoodsExtraStockValue from '@/components/GoodsExtraStockValue'
import { collectMoneyTemplateList } from '@/views/shop/api/CollectMoneyTemplate'
import { Loading } from 'element-ui'
/** 门店管理 */
export default {
  name: 'ShopStoreDetails',
  components: {
    GoodsStockValue,
    GoodsSalePriceValue,
    GoodsDepositValue,
    SpecItem,
    ExtraSpecItem,
    GoodsInfo,
    ServiceInfo,
    CloudStoreExpress,
    collectionCost,
    CollectionModel,
    CloudStoreExpressModel
    // GoodsExtraSalePriceValue,
    // GoodsExtraStockValue
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      shopUrl: '../../../public/shop.jpg',
      shopPic: '',
      shopId: '',
      shopName: '',
      shopAddress: '',
      commodityId: '',
      type: '',
      commodityName: '',
      commodityPic: '',
      chainLockStock: '',
      cabinetLockStock: '',
      cloudLock: '',
      cloudLockStock: '',
      showShopList: [],
      dialogShopList: [],
      visibleDialog: false,
      visibleDialog2: false,
      disabled: false,
      stockDisabled: false,
      currentPage: '1',
      isAfterPay: null,
      isModelAfterPay: null,

      imgList: [],
      tableList: [],
      theadList: [],
      tbodyList: [],
      regularProductId: [],
      extraProductId: [],
      list: [],
      goodsSpecList: [],
      regularDepositValue: [],
      regularSaleValue: [],
      regularStockValue: [],

      extraList: [],
      extraTable: [],
      extraGoods: [],
      cloudStoreList: [],

      commoditySale: {
        name: '零售价格',
        values: [
          {
            val: 'salePrice'
          }
        ]
      },
      deposit: {
        name: '押金',
        values: [
          {
            val: 'deposit'
          }
        ]
      },
      stock: {
        name: '库存',
        values: [
          {
            val: 'stock'
          }
        ]
      },
      goodsSpecPriceList: [],

      goodsStock: '',
      chainStock: '',
      cabinetStock: '',
      cloudStock: '',
      BindForm: {
        onlyToHospital: null,
        deliverStore: '',
        chainLock: '',
        cabinetLock: '',
        cloudLock: '',
        freeType: '',
        freeShip: '',
        freeCount: '',
        freeDelivery: '',
        freeDeliveryCount: '',
        freePick: '',
        freePickCount: '',

        retailPrice: '',

        operateId: '',
        freightId: '',
        freightCityId: '',
        chargeId: '',
        noDepositStat: '0',
        isRecovery: null,
        recoveryPrice: null
      },
      expressCost: '',
      sameCityCost: '',
      sendFastestTime: null,
      sendSlowestTime: null,
      radio1: '0',

      /** 同城配送参数 - 统一运费*/
      TySameCityDeliveryExpressType: 0, // 同城物流配送或同城自营骑手配送
      TyIsAfterPay: null,
      TySameCityDeliveryExpressCompany: '0', // 同城物流配送公司
      TySameCityDeliveryExpressCost: null, // 同城物流配送费用
      TySameCityDeliverySendFastTime: 0, // 同城物流配送最快时间
      TySameCityDeliverySendSlowTime: 24, // 同城物流配送最晚时间
      TySameCityDeliveryBySelfCost: null, // 同城自营骑手配送费用
      TySameCityByselfsendFastTime: 0, // 同城自营骑手配送最快时间
      TySameCityByselfsendSlowTime: 24, // 同城自营骑士配送最晚时间

      TySameCityRecoveryExpressType: 0, // 同城物流售后回收或同城自营骑手回收(0-同城物流售后回收 1-同城自营骑手回收)
      TySameCityRecoveryExpressCompanyId: '0', // 同城物流售后公司Id
      TySameCityRecoveryExpressCost: null, // 同城物流回收价格
      TySameCityRecoveryByselfCost: null, // 同城自营骑手回收价格

      /** 同城配送参数 - 运费模板*/
      modelSameCityDeliveryExpressType: '0', // 运费模板同城物流配送
      modelSameCityDeliveryExpressCompany: '0', // 运费模板同城配送物流公司
      modelSameCityRecoveryExpressCompany: '0', // 运费模板同城取回物流公司
      modelSameCityDeliveryBySelfFreightId: null, // 运费模板同城自营骑手发货模板

      modelSameCityRecoveryExpressType: '0', // 运费模板取回类型
      modelSameCityRecoveryExpressFreightId: null, // 运费模板取回快递物流模板
      modelSameCityDeliveryFreightId: null, // 运费模板发货快递物流模板
      modelSameCityRecoveryByselfFreightId: null, // 运费模板同城自营骑手取回模板

      /** 回收点参数*/
      collectionList: [],
      radio2: '0',

      /** dialog*/
      dialogHideList: [],
      dialogThisPage: {
        page: '',
        limit: '',
        dataList: []
      },
      isTrue: false,
      dialogVisible: false,
      listDialogLoading: true,
      dialogAddress,
      form: {
        address: {
          shengId: null,
          shiId: null,
          quId: null
        },
        shopKeyWords: ''
      },
      dialogLimit: 10,
      dialogPage: 1,
      dialogTotal: 0,
      BindData: [],
      dialogSelectList: [],

      /** 运维费模板*/
      YWFOptions: [],
      operateDialogKeyWords: '',
      YWFLimit: 10,
      YWFPage: 1,
      YWFTotal: 0,
      YWFListLoading: true,
      YWFList: [],

      /** 收费模板*/
      chargeDialog: false,
      chargeOptions: [],
      chargeKeyWords: '',
      chargeLimit: 10,
      chargePage: 1,
      chargeTotal: 0,
      chargeListLoading: true,
      chargeList: [],

      /** 运费模板*/
      expressModelVisible: false,
      YFType: '',
      YFOptions: [],
      YFCityOptions: [],
      YFList: [],

      /** 云仓模板*/
      cloudStockVisible: false,
      /** 回收点模板*/
      collectionVisible: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const params = this.$dd(this.$route.query.p)
      this.commodityPic = params.commodityInfo.goodsImg
      this.commodityId = params.commodityInfo.goodsId
      this.commodityName = params.commodityInfo.goodsName
      this.type = params.commodityInfo.type
      this.shopId = params.storeInfo.id
      this.shopName = params.storeInfo.storeName
      this.shopAddress = params.storeInfo.address
      getCloudStockById({ commodityId: this.commodityId }).then(res => {
        this.cloudStock = res.data.data.cloudLockNum
      }).catch(res => {
        this.$message.error('获取云仓库存信息失败')
      })
      getGoodsStockById({
        commodityId: this.commodityId,
        storeId: this.shopId
      }).then(inf => {
        this.chainStock = inf.data.data.chainLockNum
        this.cabinetStock = inf.data.data.cabinetLockNum
      }).catch(res => {
        this.$message.error('获取软链锁，医柜锁库存信息失败')
      })
      const loadingInstance = Loading.service({ fullscreen: true })
      storeCommodityDetail({
        storeGoodsId: this.commodityId
      }).then(res => {
        console.log(res.data.data, 'storeCommodityDetail')
        const goodsShopInfo = res.data.data
        this.BindForm.onlyToHospital = goodsShopInfo.onlyToHospital.toString()
        if (goodsShopInfo.goodsStock !== -1) {
          this.BindForm.goodsStock = goodsShopInfo.goodsStock
          this.BindForm.deliverStore = true
        }
        if (goodsShopInfo.chainLock === 1) {
          this.BindForm.chainLock = true
        }
        if (goodsShopInfo.cabinetLock === 1) {
          this.BindForm.cabinetLock = true
        }
        if (goodsShopInfo.cloudLock === 1) {
          this.BindForm.cloudLock = true
          goodsShopInfo.cloudList.forEach(item => {
            this.cloudStoreList.push({
              id: item.id,
              name: item.name
            })
          })
        }
        if (this.type == 'lease') {
          if (goodsShopInfo.collectionPointsType == 1) {
            this.BindForm.isRecovery = '1'
            this.BindForm.recoveryPrice = goodsShopInfo.recoveryPrice
            this.collectionList = goodsShopInfo.collectionPoints
            this.radio2 = goodsShopInfo.collectionPriceType.toString()
          } else if (goodsShopInfo.collectionPointsType == 0) {
            this.BindForm.isRecovery = '0'
          }
        }
        if (goodsShopInfo.freeDeliveryType === 1) {
          this.BindForm.freeType = true
          this.BindForm.freeShip = '1'
        } else if (goodsShopInfo.freeDeliveryType === 2) {
          this.BindForm.freeType = true
          this.BindForm.freeShip = '2'
          this.BindForm.freeCount = goodsShopInfo.freeDeliveryPrice
        }
        if (goodsShopInfo.freePickType === 1) {
          this.BindForm.freePick = '1'
        } else if (goodsShopInfo.freePickType === 2) {
          this.BindForm.freePick = '2'
          this.BindForm.freePickCount = goodsShopInfo.freePickPrice
        }
        if (this.type == 'lease') {
          this.BindForm.noDepositStat = goodsShopInfo.noDepositStat.toString()
        }
        this.getAllChargeList()
        this.BindForm.chargeId = goodsShopInfo.leaseChargeTemplateId
        this.getAllYWFList()
        this.BindForm.operateId = goodsShopInfo.operateId
        res.data.data.regualrCombo.forEach(item => {
          this.regularProductId.push(item.productId)
        })
        goodsShopInfo.regualrCombo.forEach(regularInfo => {
          if (this.type === 'sale') {
            this.regularSaleValue.push(regularInfo.cost)
          } else if (this.type === 'lease') {
            this.regularDepositValue.push(regularInfo.deposit)
          }
          this.regularStockValue.push(regularInfo.cloudStock)
        })
        this.loadGoodsSpec(res.data.data.regualrList)
        const extraList = []
        if (extraList && extraList.length > 0) {
          this.extraList = extraList
          this.loadExtraSpec(this.extraList, goodsShopInfo.extral)
        }
        this.getAllCityExpressList()
        if (goodsShopInfo.logisticsType === 0) {
          if (goodsShopInfo.payOrder == 0) {
            this.TyIsAfterPay = '0'
          } else if (goodsShopInfo.payOrder == 1) {
            this.TyIsAfterPay = '1'
          }
          this.radio1 = '0'
          if (goodsShopInfo.sameCitySendType == 0) {
            this.TySameCityDeliveryExpressType = '0'
            this.TySameCityDeliveryExpressCompany = goodsShopInfo.sameCityLogisticsCompanyType.toString()
            this.TySameCityDeliveryExpressCost = goodsShopInfo.expressCost
            this.TySameCityDeliverySendFastTime = goodsShopInfo.sendFastestTime
            this.TySameCityDeliverySendSlowTime = goodsShopInfo.sendSlowestTime
          } else if (goodsShopInfo.sameCitySendType == 1) {
            this.TySameCityDeliveryExpressType = '1'
            this.TySameCityDeliveryBySelfCost = goodsShopInfo.sameCityCost
            this.TySameCityByselfsendFastTime = goodsShopInfo.sendFastestTime
            this.TySameCityByselfsendSlowTime = goodsShopInfo.sendSlowestTime
          }
          if (this.type == 'sale' || (this.type == 'lease' && this.collectionList.length == 0 && this.BindForm.isRecovery == '0')) {
            if (goodsShopInfo.pickUpType == 0) {
              this.TySameCityRecoveryExpressType = '0'
              this.TySameCityRecoveryExpressCompanyId = goodsShopInfo.pickUpLogisticsCompanyType.toString()
              this.TySameCityRecoveryExpressCost = goodsShopInfo.pickUpCost
            } else if (goodsShopInfo.pickUpType == 1) {
              this.TySameCityRecoveryExpressType = '1'
              this.TySameCityRecoveryByselfCost = goodsShopInfo.pickUpCost
            }
          }
        } else if (goodsShopInfo.logisticsType === 1) {
          if (goodsShopInfo.payOrder == 0) {
            this.isModelAfterPay = '0'
          } else if (goodsShopInfo.payOrder == 1) {
            this.isModelAfterPay = '1'
          }
          this.radio1 = '1'
          if (goodsShopInfo.sameCitySendType == 0) {
            this.modelSameCityDeliveryExpressType = '0'
            this.modelSameCityDeliveryExpressCompany = goodsShopInfo.sameCityLogisticsCompanyType.toString()
            this.modelSameCityDeliveryFreightId = goodsShopInfo.express
          } else if (goodsShopInfo.sameCitySendType == 1) {
            this.modelSameCityDeliveryExpressType = '1'
            this.modelSameCityDeliveryBySelfFreightId = goodsShopInfo.sameCity
          }
          if (this.type == 'sale' || (this.type == 'lease' && this.collectionList.length == 0 && this.BindForm.isRecovery == '0')) {
            if (goodsShopInfo.pickUpType == 0) {
              this.modelSameCityRecoveryExpressType = '0'
              this.modelSameCityRecoveryExpressFreightId = goodsShopInfo.pickUp
              this.modelSameCityRecoveryExpressCompany = goodsShopInfo.pickUpLogisticsCompanyType.toString()
            } else if (goodsShopInfo.pickUpType == 1) {
              this.modelSameCityRecoveryExpressType = '1'
              this.modelSameCityRecoveryByselfFreightId = goodsShopInfo.pickUp
            }
          }
        }
        this.$nextTick(() => {
          let collectionData
          let cloudData
          if (this.BindForm.isRecovery == '1') {
            collectionData = JSON.parse(goodsShopInfo.collectionJson)
          }
          if (this.BindForm.cloudLock) {
            cloudData = JSON.parse(goodsShopInfo.cloudJson)
          }

          if (this.radio1 == '0') {
            if (this.cloudStoreList.length > 0) {
              this.$refs.cloudStoreExpress.forEach(item => {
                item.setData(cloudData)
              })
            }
          } else if (this.radio1 == '1') {
            if (this.cloudStoreList.length > 0) {
              this.$refs.cloudStoreExpressModel.forEach(item => {
                item.setData(cloudData)
              })
            }
          }
          if (this.radio2 == '0') {
            if (this.collectionList.length > 0) {
              this.$refs.collectionCost.forEach(item => {
                item.setData(collectionData)
              })
            }
          } else if (this.radio2 == '1') {
            if (this.collectionList.length > 0) {
              this.$refs.CollectionModel.forEach(item => {
                item.setData(collectionData)
              })
            }
          }
        })
        loadingInstance.close()
      }).catch(res => {
        loadingInstance.close()
        this.$message.error('无法查看商品门店，获取商品门店信息失败')
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      })
    },

    changeDisable() {
      this.disabled = true
    },
    changeStockDisable() {
      this.stockDisabled = true
    },
    /** 常规规格加载方法*/
    loadGoodsSpec(a) {
      a.forEach(item => {
        this.list.push(item)
      })
      this.$nextTick(() => {
        for (let i = 0; i < this.list.length; i++) {
          this.$refs.SpecItem[i].$data.tableHead.name = this.list[i].name
          this.$refs.SpecItem[i].$data.tableHead.values = this.list[i].valueList
          for (let j = 0; j < this.list[i].valueList.length; j++) {
            this.$refs.SpecItem[i].$data.tableHead.values[j].val = this.list[
              i
            ].valueList[j].value
          }
        }
        this.createTable()
      })
    },
    // 创建表格
    createTable() {
      this.tableList = []
      if (this.list && this.list.length !== 0) {
        this.$refs.SpecItem.forEach(item => {
          this.tableList.push(item.getData())
        })
      }
      const arrList = []
      const headList = []
      if (this.type === 'lease') {
        this.tableList.push(this.deposit, this.stock)
      } else if (this.type === 'sale') {
        this.tableList.push(this.commoditySale, this.stock)
      }
      this.tableList.forEach(item => {
        if (item.name) {
          headList.push(item.name)
          if (item.values && item.values.length !== 0) {
            arrList.push(item.values)
          }
        }
      })
      this.theadList = headList

      const modelList = this.cartesianProductOf(...arrList)
      const list = []
      const count = 1

      for (let i = 0; i < modelList.length; i++) {
        const modelArrList = []
        for (let k = 0; k < modelList[i].length; k++) {
          modelArrList.push({
            val: modelList[i][k].val,
            commodityId: '',
            index: k,
            rowspan: count
          })
        }
        list.push(modelArrList)
      }
      this.tableRowspan(list, modelList)

      this.tbodyList = list
    },
    // table合并行方法 a为table数组 b为对比数组
    tableRowspan(a, b) {
      for (let i = 0; i < a.length - 1; i++) {
        for (let k = 0; k < a[i].length; k++) {
          for (let j = i + 1; j < b.length; j++) {
            if (k === 0) {
              if (a[i][k].val === b[j][k].val) {
                a[i][k].rowspan++
                a[j][k].val = ''
              } else {
                break
              }
            } else {
              if (a[i][k].val === b[j][k].val && a[j][k - 1].val === '') {
                a[i][k].rowspan++
                a[j][k].val = ''
              } else {
                break
              }
            }
          }
        }
      }
    },
    // 笛卡尔积
    cartesianProductOf() {
      return Array.prototype.reduce.call(
        arguments,
        function(a, b) {
          const ret = []
          a.forEach(function(a) {
            b.forEach(function(b) {
              ret.push(a.concat([b]))
            })
          })
          return ret
        },
        [[]]
      )
    },
    /** 加载附加规格*/
    loadExtraSpec(a, b) {
      this.$nextTick(() => {
        for (let i = 0; i < a.length; i++) {
          this.$refs.ExtraSpecItem[i].$data.tableHead.name = a[i].name
          if (a[i].type === 'custom') {
            this.$refs.ExtraSpecItem[i].$data.tableHead.type = '1'
          } else if (a[i].type === 'online') {
            this.$refs.ExtraSpecItem[i].$data.tableHead.type = '2'
          }
          this.$refs.ExtraSpecItem[i].$data.tableHead.description = a[i].desc
          this.$refs.ExtraSpecItem[
            i
          ].$data.tableHead.isRequired = JSON.stringify(a[i].mustSelect)
          this.$refs.ExtraSpecItem[
            i
          ].$data.tableHead.multiSelFlg = JSON.stringify(a[i].multiSelFlg)
          this.$refs.ExtraSpecItem[i].$data.tableHead.values = a[i].values
          for (let j = 0; j < a[i].values.length; j++) {
            this.$refs.ExtraSpecItem[i].$data.tableHead.values[j].val =
              a[i].values[j].value
          }
        }
        this.createExtraTable(a, b)
      })
    },
    /** 创建附加规格表格*/
    createExtraTable(a) {
      const extraTable = []
      for (let i = 0; i < a.length; i++) {
        const tbody = {
          specName: this.$refs.ExtraSpecItem[i].getData().name,
          specValue: []
        }
        console.log(a[i])
        for (let j = 0; j < a[i].values.length; j++) {
          const spec = {
            value: this.$refs.ExtraSpecItem[i].getData().values[j].val,
            goods: '',
            salePrice: 'salePrice',
            stock: 'stock',
            commodityid: a[i].values[j].commodityid
            /* productId: a[i].values[j].productId,*/
            /* serviceid: ''*/
          }
          if (this.$refs.ExtraSpecItem[i].getData().type === '1') {
            spec.goods = 'goods'
          } else {
            spec.goods = 'service'
          }

          tbody.specValue.push(spec)
        }
        extraTable.push(tbody)
      }
      this.extraTable = extraTable
      console.log(extraTable)
    },

    showDialogShopList() {
      this.dialogVisible = true
      this.getDialogList()
    },

    delSelectShop(index) {
      this.dialogShopList.splice(index, 1)
      this.showShopList = []
      if (this.dialogShopList.length <= 3) {
        this.showShopList = this.dialogShopList
      } else {
        for (let i = 0; i < 3; i++) {
          this.showShopList.push(this.dialogShopList[i])
        }
      }
    },
    /** 运维费模板方法*/
    showDialogOperate() {
      this.visibleDialog2 = true
      this.getYWFList()
    },
    searchOperateDialog() {
      this.YWFReloadTableData()
    },
    resetYWF() {
      this.operateDialogKeyWords = ''
      this.YWFReloadTableData()
    },
    YWFPageSizeChange(pageSize) {
      this.YWFLimit = pageSize
      this.YWFReloadTableData()
    },
    YWFCurrentPageChange(page) {
      this.YWFPage = page
      this.getYWFList()
    },
    YWFReloadTableData() {
      this.YWFPage = 1
      this.YWFTotal = 0
      this.YWFList = []
      this.getYWFList()
    },
    getYWFList() {
      const data = {
        shopId: getShopID(),
        keySearch: '',
        page: this.YWFPage,
        limit: this.YWFLimit
      }
      if (this.operateDialogKeyWords) {
        data.keySearch = this.operateDialogKeyWords
      }
      YWFTemplateList(data)
        .then(response => {
          this.YWFList = response.data.data.data
          response.data.data.data.forEach(item => {
            const option = {
              value: item.id,
              label: item.name
            }
            this.YWFOptions.push(option)
          })
          this.YWFTotal = response.data.data.total
          this.YWFListLoading = false
        })
        .catch(() => {
          this.YWFList = []
          this.YWFTotal = 0
          this.YWFListLoading = false
        })
    },
    getAllYWFList() {
      const data = {
        shopId: getShopID(),
        keySearch: '',
        page: 1,
        limit: 0
      }
      YWFTemplateList(data).then(response => {
        response.data.data.data.forEach(item => {
          const option = {
            value: item.id,
            label: item.name
          }
          this.YWFOptions.push(option)
        })
      })
    },
    addYWFModel() {
      this.visibleDialog2 = false
      this.$router.push({ name: 'AddYWFTemplate' })
    },
    selectYWFModel(row) {
      this.visibleDialog2 = false
      this.YWFOptions.forEach(item => {
        if (item.value === row.id) {
          this.BindForm.operateId = item.value
        }
      })
    },

    /** 收费费模板方法*/
    showDialogCharge(type) {
      this.chargeDialog = true
      this.getChargeList()
    },
    searchChargeDialog() {
      this.chargeReloadTableData()
    },
    resetCharge() {
      this.chargeKeyWords = ''
      this.chargeReloadTableData()
    },
    chargePageSizeChange(pageSize) {
      this.chargeLimit = pageSize
      this.chargeReloadTableData()
    },
    chargeCurrentPageChange(page) {
      this.chargePage = page
      this.getChargeList()
    },
    chargeReloadTableData() {
      this.chargePage = 1
      this.chargeTotal = 0
      this.chargeList = []
      this.getChargeList()
    },
    getChargeList() {
      const data = {
        shopId: localStorage.getItem('shopId'),
        keySearch: '',
        page: this.chargePage,
        limit: this.chargeLimit
      }
      if (this.chargeKeyWords) {
        data.keySearch = this.chargeKeyWords
      }
      collectMoneyTemplateList(data).then(inf => {
        this.chargeList = inf.data.data.data
        this.chargeTotal = inf.data.data.total
        inf.data.data.data.forEach(item => {
          const option = {
            value: item.id,
            label: item.name
          }
          this.chargeOptions.push(option)
        })
        this.chargeListLoading = false
      })
    },
    getAllChargeList() {
      const data = {
        shopId: localStorage.getItem('shopId'),
        keySearch: '',
        page: 1,
        limit: 0
      }
      collectMoneyTemplateList(data).then(inf => {
        inf.data.data.data.forEach(item => {
          const option = {
            value: item.id,
            label: item.name
          }
          this.chargeOptions.push(option)
        })
      })
    },
    addChargeModel() {
      this.chargeDialog = false
      this.$router.push({ name: 'AddCollectMoney' })
    },
    selectChargeModel(row) {
      this.chargeDialog = false
      this.chargeOptions.forEach(item => {
        if (item.value === row.id) {
          this.BindForm.chargeId = item.value
        }
      })
    },

    /** 运费模板方法*/
    showDialogYF(type) {
      this.YFType = type
      this.visibleDialog = true
      this.getYFList()
    },
    searchYFDialog() {
      this.YFReloadTableData()
    },
    resetYF() {
      this.operateDialogKeyWords = ''
      this.YFReloadTableData()
    },
    YFPageSizeChange(pageSize) {
      this.YFLimit = pageSize
      this.YFReloadTableData()
    },
    YFCurrentPageChange(page) {
      this.YFPage = page
      this.getYFList()
    },
    YFReloadTableData() {
      this.YFPage = 1
      this.YFTotal = 0
      this.YFList = []
      this.getYFList()
    },
    getYFList() {
      const data = {
        shopId: getShopID(),
        keySearch: '',
        type: this.YFType,
        page: this.YFPage,
        limit: this.YFLimit
      }
      if (this.YFKeyWords) {
        data.keySearch = this.YFKeyWords
      }
      freightTemplateList(data)
        .then(response => {
          this.YFList = response.data.data.data
          if (this.YFType === 0) {
            response.data.data.data.forEach(item => {
              const option = {
                value: item.id,
                label: item.name
              }
              this.YFOptions.push(option)
            })
          } else if (this.YFType === 1) {
            response.data.data.data.forEach(item => {
              const option = {
                value: item.id,
                label: item.name
              }
              this.YFCityOptions.push(option)
            })
          }
          this.YFTotal = response.data.data.total
          this.YFListLoading = false
        })
        .catch(() => {
          this.YFList = []
          this.YFTotal = 0
          this.YFListLoading = false
        })
    },
    getALlYFList(type) {
      const data = {
        shopId: getShopID(),
        keySearch: '',
        type: type,
        page: 1,
        limit: 0
      }
      freightTemplateList(data).then(response => {
        if (type === 0) {
          response.data.data.data.forEach(item => {
            const option = {
              value: item.id,
              label: item.name
            }
            this.YFOptions.push(option)
          })
        } else if (type === 1) {
          response.data.data.data.forEach(item => {
            const option = {
              value: item.id,
              label: item.name
            }
            this.YFCityOptions.push(option)
          })
        }
      })
    },
    addYFModel() {
      this.visibleDialog = false
      this.$router.push({ name: 'AddFreightModel' })
    },
    addYFModelByType(activeModel) {
      this.$router.push({
        name: 'AddFreightModel',
        params: { activeModel: activeModel }
      })
    },
    selectYFModel(row) {
      this.visibleDialog = false
      if (this.YFType === 0) {
        this.YFOptions.forEach(item => {
          if (item.value === row.id) {
            this.BindForm.freightId = item.value
          }
        })
      } else if (this.YFType === 1) {
        this.YFCityOptions.forEach(item => {
          if (item.value === row.id) {
            this.BindForm.freightCityId = item.value
          }
        })
      }
    },

    /** dialog*/
    resetForm() {
      this.form.address.shengId = ''
      this.form.address.shiId = ''
      this.form.address.quId = ''
      this.form.shopKeyWords = ''
      this.dialogAddress.cityList = []
      this.dialogAddress.villageList = []
      this.reloadDialogTableData()
    },
    searchForm() {
      this.reloadDialogTableData()
    },
    dialogPageSizeChange(pageSize) {
      this.dialogLimit = pageSize

      this.reloadDialogTableData()
    },
    dialogCurrentPageChange(page) {
      if (
        this.dialogSelectList &&
        this.dialogSelectList.length > 0 &&
        this.dialogThisPage.page &&
        this.dialogThisPage.limit
      ) {
        this.dialogThisPage.dataList = this.dialogSelectList
        this.dialogHideList.push(this.dialogThisPage)
      }
      this.dialogPage = page
      this.getDialogList()
    },
    reloadDialogTableData() {
      this.dialogPage = 1
      this.dialogTotal = 0
      this.BindTable = []
      this.getDialogList()
    },
    /** 获取dialog列表*/
    getDialogList() {
      const data = {
        commodityId: this.commodityId,
        type: 0,
        province: '',
        city: '',
        area: '',
        shopKeyWords: '',
        page: this.dialogPage,
        limit: this.dialogLimit
      }
      if (this.form.address.shengId) {
        data.province = this.dialogAddress.shengId
      }
      if (this.form.address.shiId) {
        data.city = this.dialogAddress.shiId
      }
      if (this.form.address.quId) {
        data.area = this.dialogAddress.quId
      }
      if (this.form.shopKeyWords) {
        data.shopKeyWords = this.form.shopKeyWords
      }
      linkShopList(data)
        .then(response => {
          this.BindData = response.data.data.list
          this.dialogTotal = response.data.data.total
          this.listDialogLoading = false
          this.$nextTick(() => {
            if (this.dialogShopList && this.dialogShopList.length > 0) {
              this.dialogShopList.forEach(item => {
                this.BindData.forEach(inf => {
                  if (inf.storeId === item.storeId) {
                    this.$refs.elTable.toggleRowSelection(inf)
                  }
                })
              })
            }
          })
        })
        .catch(() => {
          this.BindData = []
          this.dialogTotal = 0
          this.listDialogLoading = false
        })
    },
    /** 省市区组件方法*/
    getDialogCityListByid,
    getDialogVillageListByid,
    getDialogVillage,

    /** 表格单选触发*/
    dialogSelectChange(e) {
      this.dialogSelectList = []
      if (!this.dialogThisPage.page && !this.dialogThisPage.limit) {
        this.dialogThisPage.page = this.dialogPage
        this.dialogThisPage.limit = this.dialogLimit
      }
      e.forEach(element => {
        this.dialogSelectList.push(element)
        if (this.dialogHideList && this.dialogHideList.length > 0) {
          this.dialogHideList.forEach(item => {
            if (item.page === this.dialogPage) {
              item.dataList = this.dialogSelectList
            }
          })
        }
      })
    },
    /** 全选*/
    dialogAllSelection() {
      if (this.BindData) {
        this.BindData.forEach(inf => {
          this.$refs.elTable.toggleRowSelection(inf)
        })
      } else {
        this.$refs.elTable.clearSelection()
      }
    },

    /** 批量选择添加关联门店*/
    selectAddShop() {
      this.isTrue = true
      this.dialogShopList = []
      this.dialogShopList = this.dialogSelectList
      for (let i = 0; i < 3; i++) {
        this.showShopList.push(this.dialogShopList[i])
      }
      this.dialogVisible = false
    },
    selectSubmitShop() {
      if (this.dialogHideList && this.dialogHideList.length > 0) {
        this.dialogHideList.forEach(item => {
          item.dataList.forEach(inf => {
            this.dialogShopList.push(inf)
          })
        })
      }
      for (let i = 0; i < 3; i++) {
        this.dialogShopList.push(this.dialogShopList[i])
      }
      this.dialogVisible = false
    },
    /** 跳转到新增门店界面*/
    addShop() {
      this.dialogVisible = false
      this.resetForm()
      this.$router.push({ name: 'AddStore', params: { state: 'add' }})
    },
    addOrder(row) {
      this.dialogVisible = false
      this.resetForm()
    },
    /** 获取同城运费列表*/
    getAllCityExpressList() {
      const data = {
        shopId: localStorage.getItem('shopId'),
        type: 1,
        page: 1,
        limit: 0
      }
      freightTemplateList(data).then(res => {
        res.data.data.data.forEach(item => {
          this.YFCityOptions.push({
            value: item.id,
            label: item.name
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.StoreSetting {
  .left-end {
    text-align: end;
  }
  .margin-padding {
    margin: 0;
    padding: 0;
  }
  .dispaly-flex {
    display: flex;
    align-items: center;
  }
  .text {
    white-space: nowrap;
    color: gray;
  }
  .margin-left {
    margin-left: 17px;
  }
  padding: 50px 100px;
  .ele-title {
    margin-bottom: 60px;
  }
  .ele-store {
    padding-left: 30px;
    display: flex;
    .ele-span-title {
      font-weight: bold;
      font-size: 18px;
      width: 60px;
    }
    .card-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      ::v-deep.el-card {
        margin-right: 20px;
        margin-bottom: 20px;
        width: auto !important;
        .el-card__header {
          border: none;
          padding: 0;
        }
        width: 350px;
        .ele-card-header {
          float: right;
        }
        .ele-content {
          display: flex;
          align-items: center;
          .left {
            width: 60px;
            height: 60px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            margin-left: 10px;
            p:first-child {
              font-weight: bold;
              font-size: 20px;
              margin: 0;
            }
            p:last-child {
              color: gray;
              font-size: 14px;
              margin: 10px 0px 0px 0px;
            }
          }
        }
        .ele-div--1 {
          display: flex;
          align-items: center;
          .left {
            width: 100px;
            height: 100px;
            img {
              width: 100px;
              height: 100%;
              object-fit: cover;
            }
          }
          .right {
            margin-left: 10px;
            p {
              font-size: 20px;
            }
            p:first-child {
              font-weight: bold;
              margin: 0;
            }
            p:last-child {
              color: gray;
              margin: 10px 0px 0px 0px;
            }
          }
        }
      }
    }
  }
  .ele-commodity {
    .card-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      ::v-deep.el-card {
        margin-right: 2%;
        margin-bottom: 20px;
        .el-card__header {
          border: none;
          padding: 0;
        }
      }
    }
  }
  .formModel {
    width: 100%;
    ::v-deep.el-form {
      .el-form-item__content {
        margin-left: 95px;
      }
      .el-form-item {
        .el-form-item__label {
          width: 85px;
          text-align: start;
        }
        .el-col-margin {
          margin-top: 50px;
        }
      }
    }
  }
  ::v-deep.el-dialog {
    .key-title-search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .key-search {
        .el-input {
          width: 200px;
        }
      }
    }
    .footer {
      margin-top: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div:first-child {
        .el-button {
          width: 100px;
        }
      }
    }
  }
  .ele-div-keysearch {
    display: flex;
    justify-content: space-between;
    .search-left {
      display: flex;
      ::v-deep.el-select,
      .ele-input,
      .el-button {
        margin-left: 15px;
      }
      ::v-deep.el-select {
        width: 100px;
      }
    }
    .search-flex {
      display: flex;
      ::v-deep.el-button {
        margin-left: 15px;
      }
    }
  }
  .Specifications {
    padding: 40px 20px;
    width: 100%;
    border: 1px solid #e6e6e6;
    .cations-tag {
      ::v-deep.el-row {
        margin-top: 15px;
      }
      .ele-col-item {
        width: 60px;
      }
    }
    /*::v-deep.el-button {
      width: 150px;
    }*/
  }
  .ele-table {
    width: 100%;
    margin-top: 40px;
    .ele-div-footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 0px 100px 0px;
      .footer-left {
        ::v-deep.el-button {
          width: 100px;
          margin: 0px;
        }
      }
    }
  }
  .ele-spec-table {
    min-width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    tr td {
      width: 80px;
      border: 1px solid #e6e6e6;
      box-sizing: border-box;
      text-align: center;
    }
    thead {
      font-weight: bold;
      tr td {
        height: 60px;
      }
    }
    tbody {
      tr {
        td {
          ::v-deep.el-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border: 1px solid #e6e6e6;
            overflow: unset;
            margin: 10px 0px;
          }
          ::v-deep.el-input {
            width: 120px;
          }
          .custom {
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
